

<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
<script type="text/javascript">
	/***
	 Simple jQuery Slideshow Script
	 Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
	 ***/

	function slideSwitch() {
		var $active = $('#slideshow .image.active');

		if ($active.length == 0)
			$active = $('#slideshow .image:last');

		// use this to pull the images in the order they appear in the markup
		var $next = $active.next().length ? $active.next() : $('#slideshow .image:first');
		$(".slider_nav a").removeClass("current");
		$(".slider_nav a").eq($next.index() - 1).addClass("current");

		// uncomment the 3 lines below to pull the images in random order

		//var $sibs  = $active.siblings();
		//var rndNum = Math.floor(Math.random() * $sibs.length );
		//var $next  = $( $sibs[ rndNum ] );

		$active.addClass('last-active');

		$next.css({
			opacity : 0.0
		}).addClass('active').animate({
			opacity : 1.0
		}, 1000, function() {
			$active.removeClass('active last-active');
		});
	}

	$(document).ready(function() {
		$("img").lazyload({
			effect : 'fadeIn'
		});
		
		var num = Math.random() * 3;
		$("#slideshow .image").eq(num).addClass("active");
		$(".slider_nav a").eq(num).addClass("current");
		var timer = setInterval("slideSwitch()", 5000);
		
		$(".slider_nav a").click(function() {
			clearInterval(timer);
			$(this).siblings().removeClass("current");
			$(this).addClass("current");
			var $active = $('#slideshow .image.active');

			if ($active.length == 0)
				$active = $('#slideshow .image:last');

			// use this to pull the images in the order they appear in the markup
			var $next = $('#slideshow .image').eq($(this).index());
	
			$active.addClass('last-active');
	
			$next.css({
				opacity : 0.0
			}).addClass('active').animate({
				opacity : 1.0
			}, 1000);
			$active.removeClass('active last-active');
			timer = setInterval("slideSwitch()", 5000);
		});
	});

</script>

<style type="text/css">
	/*** set the width and height to match your images **/

	#slideshow {
		position: relative;
		height: 350px;
	}

	#slideshow .image {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 8;
		opacity: 0.0;
	}

	#slideshow .image .aviso {
		position: absolute;
		bottom: 100px;
		left: 70px;
		z-index: 1;
	}

	#slideshow .image.active {
		z-index: 10;
		opacity: 1.0;
	}

	#slideshow .image.last-active {
		z-index: 9;
	}
	
	#slideshow .slider_nav { position:absolute; bottom:20px; left:20px; z-index:11; }
	#slideshow .slider_nav a { display:block; float:left; width:20px; height:20px; margin-right:5px; background:url(img/btn.png); cursor:pointer; }
	#slideshow .slider_nav a.current { background-image:url(img/btn_act.png); }
</style>

<div id="slideshow">
    <!-- botones -->
    <div class="slider_nav">
    	<a>&#32;</a>
        <a>&#32;</a>
        <!--<a>&#32;</a>-->
    </div>
    
	<div class="image">
		<a href="quienes.html"><img class="aviso" src="img/leer-mas.png" height="42" width="130" border="0" ></a>
		<img data-original="photo/slide-2.png" src="img/grey.gif" alt="Slideshow Image 2" width="940" height="350" border="0">
	</div>    
    
    
	<div class="image">
		<a href="rse.html"><img class="aviso" src="img/leer-mas.png" height="42" width="130" border="0" ></a>
		<img data-original="photo/slide-3.png" src="img/grey.gif" alt="Slideshow Image 1" width="940" height="350" border="0">
        
	</div>

	<!--<div class="image">
		<a href="quienes.html"><img class="aviso" src="img/leer-mas.png" height="42" width="130" border="0" ></a>
		<img src="img/grey.gif" alt="Slideshow Image 3" width="940" height="350" border="0" data-original="photo/slide-4.png">
	</div>-->
</div>